<template lang='pug'>
  Row(type="flex" justify="start" :gutter="32")
    Col(span="24")
      .form-shebao-title.font-16.font-weight.mb-15 薪资发放
      Form(:label-width="150" )
        FormItem(label="薪资发放时间：")
          Select.input-has-border(v-model="PayDaysValue" multiple  placeholder="请选择" style="width:100%" label-in-value clearable @on-change="PayDaysChange")
            Option(v-for="(item, index) in PayDays" :value="item.value" :key="index") {{ item.label }}
      Table.hasTitle-table.beautiful-table(:columns="createPayDaysThead" :data="payDaysTableData" :stripe="true" style="width:100%" border)
    //- Col(span="14")
    //-   .form-shebao-title.font-16.font-weight.mb-15 附件管理
    //-   Upload(
    //-     :disabled="!hasCustomerId"
    //-     type="drag"
    //-     :show-upload-list="false"
    //-     multiple
    //-     :action="uploadBaseUrl+'/Customer/'+customerId+'/Upload'" 
    //-     :on-success="attachmentsSuccess" 
    //-     :data="{categoryname: '附件'}"
    //-   )
    //-     div(style="padding: 20px 0")
    //-       Icon(type="ios-cloud-upload" size="52" style="color: #3399ff")
    //-       <p>点击或者拖拽文件至此上传</p>
    //-   div.mt-15
    //-     .my-tag.mr-20.mb-15(v-for="item in attachmentsFileList" :key="item.id")
    //-       .my-tag-inner(@click="downFiel(item.id,item.name)") {{item.name}}
    //-       .img-close.ivu-icon.ivu-icon-ios-close(@click="deleteAttachments(item.id)")
</template>

<script>
import dataApi from '@/api/data'
import config from '@/config'
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro

export default {
  name:'step_6',
  props:{
    customerId: String,
    hasCustomerId: Boolean,
    customerType: Number
  },
  data () {
    return {
      uploadBaseUrl: baseUrl,
      payDaysTableData: [], // 薪资发放表格数据
      createPayDaysThead: [ // 薪资发放表头
        {
          title: '发放次数',
          minWidth: 150,
          key: 'time'
        },
        {
          title: '发放时间',
          minWidth: 150,
          key: 'day'
        }
      ],
      PayDays: [{ value: '1', label: '1号' }, { value: '2', label: '2号' }, { value: '3', label: '3号' }, { value: '4', label: '4号' }, { value: '5', label: '5号' }, { value: '6', label: '6号' }, { value: '7', label: '7号' }, { value: '8', label: '8号' }, { value: '9', label: '9号' }, { value: '10', label: '10号' }, { value: '11', label: '11号' }, { value: '12', label: '12号' }, { value: '13', label: '13号' }, { value: '14', label: '14号' }, { value: '15', label: '15号' }, { value: '16', label: '16号' }, { value: '17', label: '17号' }, { value: '18', label: '18号' }, { value: '19', label: '19号' }, { value: '20', label: '20号' }, { value: '21', label: '21号' }, { value: '22', label: '22号' }, { value: '23', label: '23号' }, { value: '24', label: '24号' }, { value: '25', label: '25号' }, { value: '26', label: '26号' }, { value: '27', label: '27号' }, { value: '28', label: '28号' }, { value: '29', label: '29号' }, { value: '30', label: '30号' }, { value: '31', label: '31号' }],
      PayDaysValue: [], // 薪资发放日期
      attachmentsFileList: []
    }
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    // 发放时间选择
    PayDaysChange (val) {
      this.createPayDays()
    },
    // 添加日期
    createPayDays () {
      let arr = []
      this.payDaysTableData = []
      arr = this.PayDaysValue.sort((a, b) => a - b)
      arr.forEach((item, index) => {
        this.payDaysTableData.unshift({
          time: '第' + (index + 1) + '次',
          day: item + '号'
        })
      })
    },
    attachmentsSuccess () {
      this.getAttachments()
    },
    deleteAttachments (id) {
      dataApi.deleteAttachments({
        id: id
      }).then(res => {
        this.getAttachments()
      })
    },
    // 获取附件列表
    getAttachments () {
      dataApi.getAttachments({
        id: this.customerId
      }).then(res => {
        this.attachmentsFileList = res.data.data
      })
    },
    // 下载附件
    downFiel (id, fileName) {
      const suffixs = ['JPG', 'JPEG', 'PNG']
      let suffix = fileName.substring(fileName.lastIndexOf('.') + 1).toUpperCase()
      if (suffixs.includes(suffix)) {
        this.$emit('on-preview', this.uploadBaseUrl + '/Customer/DownLoadAttachment?id=' + id)
      } else {
        dataApi.getDownLoadAttachment({
          id: id
        }).then(res => {
          let blob = new Blob([res.data], { type: 'application/octet-stream' })
          if ('download' in document.createElement('a')) {
            let objectUrl = URL.createObjectURL(blob)
            const link = document.createElement('a')
            link.download = fileName
            link.href = objectUrl
            link.click()
          } else {
            navigator.msSaveBlob(blob, fileName)
          }
        })
      }
    },
    stepSubmit () {
      console.log(this.customerType)
      if (this.customerType === 1 && this.PayDaysValue.length < 1) {
        this.$emit('refresh-data')
      } else {
        dataApi.getPayDays({
          CustomerId: this.customerId,
          PayDays: this.PayDaysValue.join(',')
        }).then((res) => {
          if (res.data.success) {
            this.$Message.success(res.data.message)
            this.$emit('refresh-data')
          } else {
            this.$Message.error({
              content: res.data.message,
              duration: 10,
              closable: true
            })
          }
        })
      } 
    },
    // 重置数据
    refreshData () {
      Object.assign(this.$data, this.$options.data())
    }
  },

  watch: {}

}

</script>
<style lang='less' scoped>

</style>